<template>
  <div class="sex_box">
    <div class="title">
      <p style="font-size: 20px; color: white">男女比例</p>
      <img src="../images/dataScreen-title.png" />
    </div>
    <div class="content">
      <div class="man">
        <p>男生</p>
        <img src="../images/man.png" style="margin-top: 20px" />
      </div>
      <div class="woman">
        <p>女生</p>
        <img src="../images/woman.png" style="margin-top: 20px" />
      </div>
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, onMounted, useTemplateRef } from 'vue'
import * as echarts from 'echarts'
let charts = useTemplateRef('charts')
onMounted(() => {
  let mycharts = echarts.init(charts.value)
  mycharts.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      formatter: '{b}: {c}%',
    },
    grid: {
      left: 0,
      right: 0,
      bottom: 0,
      top: 0,
    },
    xAxis: {
      type: 'value',
      max: 100,
      show: false,
    },
    yAxis: {
      type: 'category',
      data: ['性别比例'],
      show: false,
    },
    series: [
      {
        name: '男性',
        type: 'bar',
        stack: 'gender',
        barWidth: 30,
        data: [60],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#2c82c9' },
            { offset: 1, color: '#3498db' },
          ]),
          borderRadius: [15, 0, 0, 15],
        },
        label: {
          show: true,
          position: 'insideLeft',
          formatter: '男性 60%',
          color: 'white',
          fontSize: 16,
          fontWeight: 'bold',
        },
        emphasis: {
          focus: 'series',
        },
        animationType: 'scale',
        animationDuration: 2000,
        animationEasing: 'cubicOut',
      },
      {
        name: '女性',
        type: 'bar',
        stack: 'gender',
        barWidth: 30,
        data: [40],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#e84393' },
            { offset: 1, color: '#fd79a8' },
          ]),
          borderRadius: [0, 15, 15, 0],
        },
        label: {
          show: true,
          position: 'insideRight',
          formatter: '女性 40%',
          color: 'white',
          fontSize: 16,
          fontWeight: 'bold',
        },
        emphasis: {
          focus: 'series',
        },
        animationType: 'scale',
        animationDuration: 2000,
        animationEasing: 'cubicOut',
        animationDelay: 500,
      },
    ],
  })
})
</script>
<style scoped lang="scss">
.sex_box {
  width: 100%;
  height: 100%;
  background: url(../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  margin: 10px 0px;
  .content {
    display: flex;
    justify-content: space-around;
    color: white;
    text-align: center;
    padding: 20px;
    .man {
      flex: 0.28;
      height: 130px;
      background: url(../images/man-bg.png) no-repeat;
      background-size: cover;
    }
    .woman {
      flex: 0.28;
      height: 130px;
      background: url(../images/woman-bg.png) no-repeat;
      background-size: cover;
    }
  }
  .charts {
    height: 100px;
  }
}
</style>
